<template>
	<view>
		<view class="fui-header fui-header-success">
<view class="fui-header-left" @click="result" ><text style="font-size: 32rpx"></text></view>
			<view class="title">订单管理</view>
			<view class="fui-header-right">
				<view class="btn-more" @click="menu" >更多</view>
			</view>
		</view>
		<view class="status_bar"></view>
		<view class="fui-content" >
		<v-tabs
		  v-model="status"
		  :scroll="false"
		  :tabs="navDat"
		  :bold="false"
		   v-on:change="change" 
		   ref="tabs"
		></v-tabs>
			
			<view class="fui-search">
				<view class="inner">
					<text class="iconfont icon-soushuo"></text>
					<view class="select">
						<easy-select style="height:60rpx;width:85%;" ref="easySelect" :value="selecValue.label" @selectOne="selectOne" :options="select"></easy-select>
					</view>
					<input value="" placeholder="输入关键字..." id="keyword" confirm-type="search" type="text" v-model="keyword" @confirm="search">
				</view>
				<view class="fui-search-btn" @click="search">搜索</view>
			</view>
			<view class="fui-list-outer container" v-for="(key, index) in list" :key="index">
				<view class="fui-list-group nomargin" >	
					<navigator class="fui-list order-list title-b"  data-nocache="true" :url="'./details?id='+list[index].id">
						<view class="fui-list-media">
							<text class="fui-label fui-label-danger round">{{list[index].paytype}}</text>
						</view>
						<view class="fui-list-inner">
							<view class="row">
								<view class="row-text" style="color: #666">{{list[index].ordersn}}</view>
							</view>
							<view class="row gary">
								<view class="row-text">{{list[index].createtime}}</view>
							</view>
						</view>
						<view class="angle"></view>
					</navigator>
		
					<view class="fui-list goods-list" v-for="(gkey, gindex) in list[index].goods" :key="gindex" @click="goodsUrl(list[index].goods[gindex].id)">
						<view class="fui-list-media" >
							<image class="round" :src="list[index].goods[gindex].thumb" ></image>
						</view>
						<view class="fui-list-inner" >
							<view class="title">{{list[index].goods[gindex].title}}</view>
							<view class="subtitle" >
								<view class="total">规格: {{list[index].goods[gindex].optiontitle==''?'无':list[index].goods[gindex].optiontitle}} 编码: {{list[index].goods[gindex].option_goodssn==''?'无':list[index].goods[gindex].option_goodssn}} </view>
							</view>
						</view>
						<view class="fui-list-angle auto">￥<text class="marketprice">{{list[index].goods[gindex].price}}<br> x{{list[index].goods[gindex].total}}</text></view>
					</view>					
					<view class="fui-list log-list noclick">
						<view class="fui-list-inner">
							<view class="row log-row order">
								<view class="row-text">订单状态</view>
								<view class="row-remark"><text class="text-danger">{{list[index].status}}</text></view>
							</view>														
							<!-- <view class="row log-row order">
								<view class="row-text">店铺名称</view>
								<view class="row-remark">{{list[index].merchname}}</view>
							</view>	 -->						
							<view class="row log-row order">
								<view class="row-text">买家昵称</view>
								<view class="row-remark">{{list[index].nickname}}</view>
							</view>
							<view class="row log-row order">
								<view class="row-text">配送方式</view>
								<view class="row-remark"><text class="text-success">{{list[index].dispatchname}}</text></view>
							</view>							
						</view>
					</view>		
					<view class="fui-list-group-title text-right">
						<view class="status">共<text class="text-success">{{list[index].total}}</text>个商品 实付:<text class="text-success">￥{{list[index].grprice}}</text> </view>
					</view>	
						
					<view class="fui-list-group-title text-right big">
						<!-- 维权 -->						
						<!-- 未付款 -->						
						<!-- 已付款 -->								
						<!-- 快递发货 -->
					
						<navigator v-if="isNav&&navKey[status]==2" class="btn btn-success btn-sm order-btn" data-action="send" :url="'./sendcancel?id='+list[index].id" @click="cancelGoods(list[index].id)">取消发货</navigator>	
						<navigator v-if="isNav&&navKey[status]==2" class="btn btn-success btn-sm order-btn" data-action="send"  @click="okGoods(list[index].id)">确认收货</navigator>	
						
						<navigator v-if="isNav&&(navKey[status]==1)&&list[index].dispatchname=='自提'" class="btn btn-success btn-sm order-btn" data-action="send"  @tap="deliver(list[index].id)">
							确认取货	
						</navigator>	
						
						<navigator v-if="isNav&&(navKey[status]==1)&&list[index].dispatchname!='自提'" class="btn btn-success btn-sm order-btn" data-action="send"  :url="'./send?id='+list[index].id">
							确认发货
									
						</navigator>
										
						
				
							
						<!-- 已发货 -->						

						<navigator class="btn btn-sm btn-default order-btn" data-action="remarksaler"  :url="'./remarks?id='+list[index].id">
							<text class="text-success iconfont icon-beizhu161129" style="font-size: 28rpx;padding-right: 10rpx; "></text> 备注
						</navigator>
						<navigator class="btn btn-default btn-sm" :url="'./details?id='+list[index].id" >查看详情</navigator>
					</view>
				</view>
			</view>
			<view  class="fui-title center" v-if="list.length<1" >没有数据</view>
			<view  class="fui-title center" v-if="stop==false">没有更多了</view>
			<view class="head-menu-mask out" @click="menu" v-if="tmenu"></view>
			<view :class="'head-menu '+ (tmenu?'in':'out')" >			       
				<navigator v-if="isNav" @tap="wq" class="batch-btn" ><text class="iconfont icon-wqdd"></text> 维权订单</navigator>	
				<navigator v-else @tap="pt" class="batch-btn" ><text class="iconfont icon-wqdd"></text> 普通订单</navigator>				
			</view>
			
		</view>
		<view class="bstatus_bar"></view>
		<menus :mnav=1></menus>
	</view>
</template>

<script>
var t = getApp().globalData,
	e = t.requirejs('core'),
	i = t.requirejs('foxui'),
	a = t.requirejs('jquery');
	export default {
		data() {
			return {
				keyword: '',
				active:false,
				tmenu:false,
				list:[],
				searchfield:'ordersn',
				select:[
					{
						'label':'订单号',
						'value':'ordersn'
					},
					{
						'label':'会员信息',
						'value':'member'
					},
					{
						'label':'收件人信息',
						'value':'address'
					},
					{
						'label':'地址信息',
						'value':'location'
					},
					{
						'label':'快递单号',
						'value':'expresssn'
					},
					{
						'label':'商品名称',
						'value':'goodstitle'
					},
					{
						'label':'商品编码',
						'value':'goodssn'
					},
					{
						'label':'核销员',
						'value':'saler'
					},
					{
						'label':'核销门店',
						'value':'store'
					},
					{
						'label':'商户名称',
						'value':'merch'
					}
				],
				selecValue:{
					
				},
				nav:[
					"待发货",
					"待付款",
					"待收货",
					"已完成",
					"已关闭",
				],
				navKey:[
					1,0,2,3,-1
				],
				status:0,
				wQnavKey:[
					4,5
				],
				wQnav:[
					"维权申请",
					"维权完成",
				],
				
				//下拉数据没有数据，暂停下拉操作
				stop:true,
				page:1,
				isNav:true,
				navDat:[],
				get:[]
			}
		},
		onLoad(e){
			this.get=e
			this.selecValue=this.select[0]
			if('type' in e){
				this.navDat=this.wQnav
				this.isNav=false
			}else{
				this.navDat=this.nav
				this.isNav=true
			}
			if('state' in e){
				this.status=e.status
			}
		
			this.init()
		},
		onShow(){
			if('type' in this.get){
				this.navDat=this.wQnav
				//true 普通订单  false 维权订单
				this.isNav=false
			}else{
				this.navDat=this.nav
				//true 普通订单  false 维权订单
				this.isNav=true
			}
			//灰色遮罩层
			this.tmenu=false
			//菜单默认
			if('state' in this.get){
				this.status=Number(this.get.state)
			}
			else{
				this.status=0
			}
			this.list=[]
			this.page=1
			this.init()
			if(this.$refs.tabs){
				this.$refs.tabs.init()
			}
		},
		methods: {
			//确认取货吗
			deliver(id){
				// 少确定取货接口
				uni.showModal({
				    title: '提示',
				    content: '确认取货吗',
				    success: function (res) {
						  if (res.confirm) {
							  
							  
						  }
					}
				})
				
			},
			okGoods(id){
				let self=this
				uni.showModal({
				    title: '提示',
				    content: '确认收货吗',
				    success: function (res) {
				        if (res.confirm) {
				            //删除接口
				            e.get('merchmanage.order.op.finish', {id}, function(t) {
				            	if(t.status==1){
				            		uni.showToast({
				            		    title: '操作成功',
				            			icon:"none",
				            		    duration: 2000
				            		});
				            		self.list.splice(index, 1)
				            	}else{
				            		uni.showToast({
				            		    title: '操作失败',
				            			icon:"none",
				            		    duration: 2000
				            		});
				            	}
				            });
				        } 
				    }
				});
			},
			goodsUrl(id){
				let url=t.api+'&r=goods.detail&id='+id
				url=url.replace("jxshops_api.php","jxshops.php")　
				location.href=url
			},
			//菜单选择
			change(index){
				this.status=index
				this.list=[]
				this.stop=true
				this.page=1
				this.init()
			},
			//搜索
			search(res) {
				this.page=1
				this.list=[]
				this.keyword=res.value
				this.init()
				
			},
			//普通订单
			pt(){
				this.list=[]
				this.page=1
				//普通菜单
				this.navDat=this.nav
				//true 普通订单  false 维权订单 
				this.isNav=true
				//灰色遮罩层
				this.tmenu=false
				//菜单默认
				this.status=0
				this.$refs.tabs.init()
				this.init()
			},
			//维权订单
			wq(){
				this.list=[]
				this.page=1
				//维权菜单
				this.navDat=this.wQnav
				//true 普通订单  false 维权订单 
				this.isNav=false
				//灰色遮罩层
				this.tmenu=false
				//菜单默认
				this.status=0
				//重新计算菜单下的下划线
				this.$refs.tabs.init()
				this.init()
			},
			//select 选择事件
			selectOne(options) {
				  this.selecValue = options
			 },
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			//获取列表数据
			init(type=''){
				let self=this,data={}
				if(this.isNav)
					data.status=this.navKey[this.status]
				else
					data.status=this.wQnavKey[this.status]
				data.page=this.page	
				data.keyword=this.keyword
				data.searchfield=this.selecValue.value
				console.log(data)
				//订单数据
				e.post('merchmanage.order.getlist',data, function(t) {
					if(t.result.list.length<1){
						if(data.page==1)
							self.stop=true
						else
							self.stop=false
						return	
					}
					if(type=='add'){
						self.list=self.list.concat(t.result.list);
					}else{
						self.list=t.result.list
					}
				});
				
			},
			//搜索
			search() {
				this.list=[]
				this.page=1
				this.init()
			},
			input(res) {
				this.keyword = res.value
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			// 商品编辑
			made(){
				this.active=!this.active
			},
			// 点击更多
			menu(){				
				this.tmenu=!this.tmenu			
			},
			//返回上一页
			result(){
				let pages = getCurrentPages();
				if(pages.length<2){
					return uni.navigateTo({
					    url: '../merchmanage/merchmanage'
					});
				}
				
				if('type' in this.get){
					return uni.navigateBack({
						 delta: 1
					});
				}
				if(this.isNav){
					uni.navigateBack({
						 delta: 1
					});
				}else{
					this.isNav=true
					this.navDat=this.nav
					this.status=0
					this.$refs.tabs.init()
					
				}
				
		
			}
			
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		//下拉加载
		onReachBottom(){
			if(this.stop==false){
				return false
			}
			this.page+=1
			this.init('add')
		}
	}
</script>

<style lang="scss">
.fui-list{padding: 4upx 24upx;}
.fui-list-media .title{
	background: rgba(0,0,0,0.6);
	font-size: 20rpx;
	height: 30rpx;
	line-height: 30rpx;
}
.fui-list-inner .title{
	font-size: 30rpx;
	color: #444;
}
.fui-list-inner .subtitle{
	font-size: 28rpx;
	padding: 4rpx 0;
}
.fui-list-inner .subtitle .total{
	width: 150rpx;
	font-size: 24rpx;
	display: inline-block;
}
.fui-header .iconfont, .fui-header .btn-more{
	color: #fff;
	font-size: 24rpx;
	padding: 0 20rpx;
}

.head-menu-mask {
    background: rgba(0,0,0,0.5);
    position: fixed;
    top: 88rpx;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    // display: none;
}
.head-menu {
    position: fixed;
    top: 102rpx;
    right: 10rpx;
    border-radius: 10rpx;
    background: #fff;
    z-index: 9999;
    padding: 10rpx 0.5rem;
}
.head-menu.in {
    opacity: 1;
    transition-duration: 500ms;
}
.head-menu.out {
    opacity: 0;
    z-index: 10999;
    transition-duration: 500ms;
	right: -200rpx;
}
.head-menu:before {
    position: absolute;
    content: "";
    top: -10rpx;
    right: 40rpx;
    height: 20rpx;
    width: 20rpx;
    background: #fff;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.head-menu navigator {
    font-size: 0.75rem;
    color: #777;
    padding: 15rpx 10rpx;
    border-top: 0.5px solid #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.head-menu navigator:first-child {
    border: none;
}
.head-menu .iconfont{
	padding-right: 10rpx;
}


.btn.btn-danger {
	background: #d9534f !important;
	border: 1px solid #d9534f;
}
/* 搜索框 */
.fui-search {
    background: #f7f7f8;
    padding: 20rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.fui-search .inner {
    background: #fff;
    border-radius: 20rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.fui-search .inner .iconfont {
    height: 60rpx;
	width: 10%;
    text-align: center;
    line-height: 60rpx;
    color: #b4b4b4;
}
.fui-search .inner .select {
    height: inherit;
    width: 35%;
    position: relative;
}
.fui-search .inner .select:before {
    content: "";
    right: 0;
    top: 20rpx;
    bottom: 20rpx;
    position: absolute;
    border-right: 1px solid #eee;
    z-index: 999;
}
.fui-search .inner .select select {
    height: inherit;
    background: none;
    border: 0;
    padding: 0 20rpx 0 5rpx;
    margin: 0;
    color: #666;
}
.fui-search .inner input {
    height: inherit;
    border: 0;
    padding: 0 20rpx;
    margin: 0;
    color: #666;
	width: 55%;
}
.fui-search .fui-search-btn {
    color: #5f646e;
    padding-left: 20rpx;
	line-height: 60rpx;
}
.fui-menu-group .fui-menu-item.noactive:active {
    background: transparent;
}
.fui-label.round{
	border-radius: 10rpx;
	padding: 5rpx 10rpx;
}
.fui-list-inner .row .row-text{
	color: #888;
	font-size: 24rpx;
}
.goods-list .fui-list-angle {
    text-align: right;
    color: #999;
    margin-right: 5rpx;
    font-size: 24rpx;
}
.fui-list.log-list .fui-list-inner .row.log-row.order .row-remark {
    color: #333;
    font-size: 24rpx;
}
.fui-list-group{margin-top: 20rpx;}
.fui-list-group-title {
    position: relative;
    height: auto;
    line-height: inherit;
    display: block;
    overflow: hidden;
    padding: 15rpx 20rpx;
    color: #444;
}
.fui-list-group-title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 20rpx;
    right: 20rpx;
    border-top: 1px solid #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.btn.btn-default{
	background: #f7f7f7 !important;
	border: 1px solid #dfdfdf;
}
.fui-list-group-title .status{
	font-size: 24rpx;
}
.fui-list-group-title.big{
	padding: 20rpx;
}
.fui-list-group-title.big navigator{
	margin: 0 5rpx;
}
.fui-list-inner .row{
	height: 44rpx;
	line-height: 44rpx;
}
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: scroll;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		margin-top: 50rpx;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
